<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../css/element.css">
		<!-- 引入组件库 -->
		<script src="../../js/element.js"></script>
		<!-- 引入网络传输库 -->
		<script src="../../js/axios.min.js"></script>
		<!-- 处理js对象的工具，可以对js对象进行序列化处理 -->
		<script src="../../js/qs.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 顶部搜索栏区域 -->
			<el-form :inline="true" :model="findUser" class="demo-form-inline">
				<el-form-item label="用户名">
					<el-input v-model="findUser.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item label="家庭住址">
					<el-input v-model="findUser.useraddress" placeholder="家庭住址"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="findUserInfo()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="addUserInfo()">新增</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="">清空</el-button>
				</el-form-item>
			</el-form>
			<!-- 信息列表展示开始 -->
			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="username" label="用户名" width="120">
				</el-table-column>
				<el-table-column prop="userpwd" label="密码" width="120">
				</el-table-column>
				<el-table-column prop="usertel" label="联系方式" width="120">
				</el-table-column>
				<el-table-column prop="useraddress" label="家庭地址" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="updateUserInfo(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="deleteUserInfo(scope.row.id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- <div style="margin-top: 20px">
				<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
				<el-button @click="toggleSelection()">取消选择</el-button>
			</div> -->
			<!-- 分页组件 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pageNum" :page-sizes="[2, 3, 5, 10]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
			<!-- 新增、编辑功能的模态框 -->
			<el-dialog title="用户信息" :visible.sync="dialogFormVisible">
				<el-form :model="editUserInfo" :rules="rules">
					<el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
						<el-input v-model="editUserInfo.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="userpwd" :label-width="formLabelWidth">
						<el-input type="password" v-model="editUserInfo.userpwd" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系方式" prop="usertel" :label-width="formLabelWidth">
						<el-input v-model="editUserInfo.usertel" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="家庭住址" prop="useraddress" :label-width="formLabelWidth">
						<el-input v-model="editUserInfo.useraddress" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
			 	<el-button type="primary" @click="saveUserInfo()">确 定</el-button>
				</div>
			</el-dialog>


		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				// 搜索框中需要用到的数据对象
				findUser: {
					username: "",
					useraddress: ""
				},
				// 用户信息列表对象
				tableData: [],
				multipleSelection: [],
				dialogFormVisible: false,
				// 新增对象
				editUserInfo: {
					id: null,
					username: "",
					userpwd: "",
					usertel: "",
					useraddress: "",
					isdelete: 0,
					imgsrc: ""
				},
				// dialog框的文本宽度指定
				formLabelWidth: '120px',
				// 表单校验规则
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					userpwd: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					usertel: [{
						required: true,
						message: '请输入联系方式',
						trigger: 'blur'
					}],
					useraddress: [{
						required: true,
						message: '请输入家庭住址',
						trigger: 'blur'
					}]
				},
				// 分页相关属性
				pageNum:1,
				pageSize:5,
				total:100
			},
			methods: {
				// 获取用户列表信息
				findUserInfo: function(currentPage,currentSize) {
					// 默认情况下，第一次调用进行默认赋值操作
					if(!currentPage){
						currentPage=this.pageNum
					}
					if(!currentSize){
						currentSize=this.pageSize
					}
					// 在axios请求后，与发起请求前指向的this对象是不同的，在方法只能够this指代vue示例，在axios发起请求后的this为window
					// 如果想在axios发起 请求后使用原this对象，可以提前将this保存起来即可
					var that = this
					// 处理请求参数
					var params=Qs.stringify(this.findUser)
					params+="&pageNum="+currentPage+"&pageSize="+currentSize
					console.log(params)
					axios.post("http://localhost:8086/getUserInfoes", params).then(function(
						response) {
						// 对保存列表信息的数据重新赋值
						that.tableData = response.data.list
						that.pageNum=response.data.pageNum
						that.pageSize=response.data.pageSize
						that.total=response.data.total
					

					}).catch(function(err) {

					})

				},
				// 用户信息列表选择时进行触发
				toggleSelection(rows) {
					if (rows) {
						rows.forEach(row => {
							this.$refs.multipleTable.toggleRowSelection(row);
						});
					} else {
						this.$refs.multipleTable.clearSelection();
					}
				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				// 新增方法
				addUserInfo: function() {
					// 将数据对象置空
					this.editUserInfo = {}
					// 显示dialog框
					this.dialogFormVisible = true
				},
				// 新增、修改信息保存
				saveUserInfo: function() {
					var that = this
					axios.post("http://localhost:8086/editUserInfo", Qs.stringify(this.editUserInfo)).then(
						function(response) {
							// 根据响应结果进行判断，若响应的是success
							if (response.data == "success") {
								// 隐藏dialog框
								that.dialogFormVisible = false
								// 重新获取数据
								that.findUserInfo()
							}


						}).catch(function(err) {

					})

				},
				// 修改用户信息的方法
				updateUserInfo: function(userinfo) {
					// 信息回显
					console.log(userinfo)
					this.editUserInfo = userinfo
					// 打开弹框
					this.dialogFormVisible = true
				},
				deleteUserInfo: function(userid) {
					console.log(userid)
					this.editUserInfo.id = userid
					this.editUserInfo.isdelete = 1
					this.saveUserInfo()


				},
				// 分页相关
				handleSizeChange(val) {
					this.findUserInfo(this.pageNum,val)
				},
				handleCurrentChange(val) {
					this.findUserInfo(val,this.pageSize)
				}
			},
			mounted() {
				this.findUserInfo()
			}

		})
	</script>
</html>
